<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>联系我们</title>
    <!-- 引入Font Awesome图标 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link rel="stylesheet" href="css/me.css">
   <!-- 使用Font Awesome图标 -->
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
  <!-- 顶部导航 -->
    <nav class="top-nav">
        <div class="container">
            <div class="nav-container">
                <a href="#" class="logo">
    <img src="img/x1.jpg" height="50px" width="200px">
                </a>
                <div class="nav-links">
					<a href="new_file.html" class="nav-link "><i class="fas fa-home"></i> 首页</a>
					<a href="1.html" class="nav-link "><i class="fas fa-book"></i>学习</a>
                    <a href="https://www.lanqiao.cn/" class="nav-link"><i class="fas fa-project-diagram"></i> 学习路径</a>
                    <a href="https://www.lanqiao.cn/louplus/" class="nav-link"><i class="fas fa-code"></i> 实训营</a>
                    <a href="https://juejin.cn/" class="nav-link"><i class="fas fa-users"></i> 社区</a>
                </div>
                
</nav>
        </ul>
	      </ul>
	  </nav>
    <section class="contact-section">
        <div class="container">
            <h2 class="section-title" >联系我们</h2>
            
            <div class="contact-wrapper">
                <!-- 联系表单 -->
                <form class="contact-form" id="contactForm">
                    <div class="form-group">
                        <input type="text" name="name" placeholder="您的姓名" required>
                    </div>
                    <div class="form-group">
                        <input type="email" name="email" placeholder="电子邮箱" required>
                    </div>
                    <div class="form-group">
                        <input type="text" name="subject" placeholder="主题" required>
                    </div>
                    <div class="form-group">
                        <textarea name="message" rows="6" placeholder="留言内容" required></textarea>
                    </div>
                    <button type="submit">发送消息</button>
                </form>

                <!-- 联系信息 -->
                <div class="contact-info">
                    <div class="info-item">
                        <i class="fas fa-map-marker-alt"></i>
                        <div>
                            <h3>办公地址</h3>
                            <p>广东省广州市从化区XXXXXXXXX</p>
                        </div>
                    </div>
                    <div class="info-item">
                        <i class="fas fa-phone"></i>
                        <div>
                            <h3>联系电话</h3>
                            <p>1560290XXXX</p>
                        </div>
                    </div>
                    <div class="info-item">
                        <i class="fas fa-envelope"></i>
                        <div>
                            <h3>电子邮箱</h3>
                            <p>343632XXX@qq.com</p>
                              
                        </div>
                    </div>
                     <section class="card">
            <h2><i class="fas fa-envelope"></i> 联系方式</h2>
        <div class="contact-icons">
               <a href="https://wx.qq.com/" class="contact-icon">
                   <img src="img/weixin1.png" alt="微信">
               </a>
               <a href="https://im.qq.com/index/" class="contact-icon">
                   <img src="img/qq.jpg" alt="QQ">
               </a>
               <a href="https://mail.qq.com/" class="contact-icon">
                   <img src="img/qqyouxiang.jpg" alt="QQ邮箱">
				   
               </a>
           </div>

				   
        </section>
                </div>
            </div>
         

            <!-- 地图 -->
            <div class="map-container">
                <!-- 嵌入高德地图 -->
                <iframe 
                    src="https://www.amap.com/" 
                    width="100%" 
                    height="100%" 
                    style="border:0;" 
                    allowfullscreen="" 
                    loading="lazy">
                </iframe>
            </div>
        </div>
    </section>
    <script src="js/me.js"></script>

</body>
</html>
